import { t } from 'i18next'
import { Button, InnerInputRef, Input, Modal, Radio } from '@kedacom/react-next'
import { PhoneModalWrap, RadioWrap, Wrap, WrapFooter } from './style'
import shallow from 'zustand/shallow'
import { useStore as useMeetingScheduleStore } from '../store'
import { CommonCard } from './components/common'
import { MeetingCardProps, MeetingEntity } from '../interface'
import { useRef, useState } from 'react'
import Alert from '@/components/Alert'
import { regexEnum } from '@/utils'
import { useGlobalStore } from '@/store/global'

export function NotParticipateInCard(props: MeetingCardProps) {
	const { isValidLink, update, attending_info } = useMeetingScheduleStore(
		(state) => ({
			update: state.update,
			isValidLink: state.isValidLink,
			attending_info: state.attending_info,
		}),
		shallow
	)
	const [is_show_participate_modal, setIsShowParticipateModal] = useState(false)
	const [participate_type_radio, setParticipateTypeRadio] = useState(2)
	const [phone, setPhone] = useState('')
	const [is_show_phone_participate_modal, setIsShowPhoneParticipateModal] = useState(false)
	const ref = useRef<InnerInputRef>(null)
	const reset = () => {
		setPhone('')
		setParticipateTypeRadio(2)
	}
	const actionParticipate = (_meeting: MeetingEntity) => {
		reset()
		const { meeting_id, video, last_modify_time, isRegularMeeting } = _meeting
		/**是否例会(审批列表中显示例会样式，其余以普通会议显示)*/
		let person_attend_info = {
			isVideoMeeting: video,
			isParticipated: 1,
			participatedType: 1,
			meetingMoid: meeting_id,
			participatedNO: '',
			reasonId: '',
		}
		if (video) {
			update({
				attending_info: { ...person_attend_info } /**当前操作信息 */,
				_option_meeting: _meeting /**操作的会议*/,
			})
			setIsShowParticipateModal(true)
		} else {
			isValidLink({
				last_modify_time,
				meeting_moid: meeting_id,
				is_regular_meeting: isRegularMeeting,
			})
		}
	}
	return (
		<>
			<Wrap className={props.className}>
				<CommonCard
					entity={props.entity}
					orderArr={props.orderArr}
					is_show_share={false}
					is_show_vcs={false}
					is_show_edit={false}
					is_show_e164={false}
					is_show_domain_name={false}
					is_upload_file={true}
					file_num={props.entity.file_num ?? 0}
				></CommonCard>
				<WrapFooter className="meeting-card-footer">
					<div className="meeting_card_audit_result"></div>
					<div className="meeting_card_manager_option">
						<Button
							className="btn"
							onClick={() => {
								const user = useGlobalStore.getState().user
								if (!user?.enable_meeting) {
									Alert(t('无会议管理权限，请通知管理员'))
									return false
								}
								actionParticipate(props.entity)
							}}
						>
							{t('参加')}
						</Button>
					</div>
				</WrapFooter>
				{/* 参加方式 */}
				<Modal
					open={is_show_participate_modal}
					title={t('参加会议')}
					width={400}
					height={260}
					okText={t('参加')}
					onOk={() => {
						if (participate_type_radio === 0) {
							Alert(t('请选择参会方式！'))
							return
						}
						if (participate_type_radio === 3) {
							setIsShowPhoneParticipateModal(true)
						} else {
							const { meeting_id, video, last_modify_time } = props.entity
							/**是否例会(审批列表中显示例会样式，其余以普通会议显示)*/
							const is_regular_meeting = props.entity.isRegularMeeting
							isValidLink({
								last_modify_time,
								meeting_moid: meeting_id,
								is_regular_meeting,
							})
						}
						setIsShowParticipateModal(false)
					}}
					onCancel={() => {
						setIsShowParticipateModal(false)
					}}
					cancelText={t('取消')}
				>
					<RadioWrap>
						<Radio
							checked={participate_type_radio === 2}
							onChange={(e, v) => {
								v && setParticipateTypeRadio(2)
							}}
							height={40}
							width={220}
						>
							{t('通过个人客户端参加')}
						</Radio>
						<Radio
							checked={participate_type_radio === 1}
							onChange={(e, v) => {
								v && setParticipateTypeRadio(1)
							}}
							height={40}
							width={220}
						>
							{t('去会议室参加')}
						</Radio>
						{props.entity.meeting_type !== 2 && (
							<Radio
								checked={participate_type_radio === 3}
								onChange={(e, v) => {
									v && setParticipateTypeRadio(3)
								}}
								height={40}
								width={220}
							>
								{t('电话参加')}
							</Radio>
						)}
					</RadioWrap>
				</Modal>
				{/* 电话参加 */}
				<Modal
					open={is_show_phone_participate_modal}
					title={t('电话号码')}
					width={400}
					height={260}
					onOk={async () => {
						let valid = await ref.current?.valid()
						if (!valid) return
						if (attending_info) {
							update({
								attending_info: {
									...attending_info,
									...{
										participatedNO: phone,
										participatedType: 3,
									},
								},
							})
							const { meeting_id, last_modify_time } = props.entity
							/**是否例会(审批列表中显示例会样式，其余以普通会议显示)*/
							const is_regular_meeting = props.entity.isRegularMeeting
							isValidLink(
								{
									last_modify_time,
									meeting_moid: meeting_id,
									is_regular_meeting,
								},
								() => {
									setPhone('')
									setIsShowPhoneParticipateModal(false)
								}
							)
						}
					}}
					onCancel={() => {
						setIsShowPhoneParticipateModal(false)
					}}
					okText={t('确定')}
					cancelText={t('取消')}
				>
					<PhoneModalWrap>
						<div className="content">
							<Input
								width={280}
								value={phone}
								height={31}
								placeholder=""
								focusMsg=""
								innerRef={ref}
								rule={{
									required: {
										showIcon: false,
										msg: t('电话号码不能为空，请输入'),
									},
									regular: [
										{
											regex: regexEnum.phoneIllegal,
											msg: t('存在非法字符，请重新输入'),
										},
										{
											regex: regexEnum.phoneMaxLength,
											msg: t('最多20个字符，包括 数字 . _ - * # 空格'),
										},
									],
								}}
								onChange={(e, v) => {
									setPhone(v)
								}}
							/>
						</div>
					</PhoneModalWrap>
				</Modal>
			</Wrap>
		</>
	)
}
